<template>
    <div>
        <el-form :inline="true" :model="search" class="technician-search">
            <el-form-item label="技师搜索">
                <el-input v-model="search.name" placeholder="姓名，手机号搜索" clearable />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">搜索</el-button>
            </el-form-item>
        </el-form>
        <el-table ref="singleTableRef" :data="list" highlight-current-row style="width: 100%;max-height: 500px;margin:10px 0;"
            @current-change="handleCurrentChange">
            <el-table-column type="index" width="50" />
            <el-table-column label="头像" width="120">
                <template #default="scope">
                    <el-avatar :size="40" :src="scope.row.headimg"></el-avatar>
                </template>
            </el-table-column>
            <el-table-column property="nickname" label="昵称" width="120" />
            <el-table-column property="realname" label="姓名" width="120" />
            <el-table-column label="身份" width="120">
                <template #default="scope">
                    <el-tag v-if="scope.row.is_mch" type="success">商户技师</el-tag>
                    <el-tag v-else>个人</el-tag>
                </template>
            </el-table-column>
            <el-table-column property="mobile" label="联系电话" width="140" />
            <el-table-column property="distance_text" label="距离" width="180" />
            <el-table-column property="appointment_time" label="最早可约" />
        </el-table>
        <el-pagination size="small" background layout="prev, pager, next" :page-size="search.limit" :current-page="search.page" :total="search.total" @current-change="currentPage"/>
    </div>
</template>
<script>
    export default {
        props: {
            modelValue: {
                type: Object,
                default: () => ({})
            },
            orders_id: {
                type: [String, Number],
                default: ''
            }
        },
        data() {
            return {
                value: '',
                list: [],
                search: {
                    limit:10,
                    total: 0,
                    page: 1,
                    orders_id: '',
                    name: ''
                },
            };
        },
        created() {
            this.value = this.modelValue;
            this.search.orders_id = this.orders_id;
            this.getList();
        },
        methods: {
            onSubmit() {
                this.search.page = 1;
                this.getList();
            },
            currentPage(page) {
                this.search.page = page;
                this.getList();
            },
            getList() {
                this.$refs.singleTableRef?.setCurrentRow();
                this.pageLoading = true;
                this.list = [];
                this.$http.useGet(location.pathname + "Technician/index", this.search).then(res => {
                    this.search.total = res.data.total;
                    this.list = res.data.data;
                }).finally(() => {
                    this.pageLoading = false
                })
            },
            handleCurrentChange(row, oldRow) {
                if (row) {
                    this.value = row.uid;
                    this.updateValue();
                } else {
                    this.value = '';
                    this.updateValue();
                }
            },
            updateValue() {
                this.$emit('update:modelValue', this.value);
            },
        },
    };
</script>
<style lang="scss" scoped>
    .el-form.el-form--default.el-form--label-right.el-form--inline.technician-search .el-form-item .el-form-item__label {
        line-height: 32px;
        margin-bottom: 0;
    }
</style>